<template>
  <div id="inStocks">
    <!-- 面包导航 -->
    <el-breadcrumb separator="/" style="padding-left:10px;padding-bottom:10px;font-size:12px;">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>业务管理</el-breadcrumb-item>
      <el-breadcrumb-item>入库审核</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域 -->
    <el-card>
      <!-- 搜索部分 -->
      <el-form :inline="true" :model="queryMap" class="demo-form-inline" label-width="70px">
        <div>
          <el-form-item label="单号">
            <el-input
              clearable
              @clear="search"
              v-model="queryMap.inNum"
              placeholder="请输入入库单查询"
              @keyup.enter.native="search"
              class="input-with-select"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="操作人" label-width="70px">
            <el-input clearable v-model="queryMap.username" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="入库日期" label-width="80px">
            <el-date-picker
              :clearable="false"
              v-model="range"
              type="datetimerange"
              :value-format="'yyyy-MM-dd HH:mm:ss'"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right">
            </el-date-picker>
          </el-form-item>
        </div>
        <el-form-item label="电话" label-width="70px">
          <el-input clearable v-model="queryMap.phone" placeholder="请输入号码"></el-input>
        </el-form-item>

        <el-form-item style="margin-left: 15px">
          <el-button icon="el-icon-refresh" @click="clearTime">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
        </el-form-item>

      </el-form>
      <!-- 表格区域 -->
      <el-table v-loading="loading" :data="tableData" border style="width: 100%;" max-height="600">
        <el-table-column label="#" prop="id" width="60" sortable></el-table-column>
        <el-table-column prop="inNum" :show-overflow-tooltip='true' label="入库单号" width="180"></el-table-column>
        <el-table-column prop="username" label="操作员" width="150"></el-table-column>
        <el-table-column prop="phone" label="联系方式" width="150"></el-table-column>
        <el-table-column prop="inDate" label="入库时间" sortable width="180"></el-table-column>
        <el-table-column prop="auditorName" label="审核人" width="150">
          <template slot-scope="scope">
            {{scope.row.auditorName}}
            <el-tag size="middle" v-if="scope.row.staus===0">待审核</el-tag>
            <el-tag size="middle" type="success" v-else>已入库</el-tag>
          </template>

        </el-table-column>
        <el-table-column prop="remark" label="备注" width="400"></el-table-column>
        <el-table-column label="操作" fixed="right" width="180">
          <template slot-scope="scope">
            <el-button icon="el-icon-check" @click="getApprove(scope.row.id)" type="success" size="mini"></el-button>
            <el-button icon="el-icon-view" @click="detail(scope.row.id)" type="primary" size="mini"></el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete"></el-button>

            <!--                        给操作员使用的按钮-->
            <span v-if="scope.row.status==0">
                             <el-popconfirm
                               @onConfirm="remove(scope.row.id)"
                               style="margin-left: 20px;"
                               confirmButtonText='好的'
                               cancelButtonText='不用了'
                               icon="el-icon-info"
                               iconColor="red"
                               title="这是一段内容确定移入回收站吗？"
                             >
              <el-button type="text" slot="reference" size="mini" icon="el-icon-s-operation">回收站</el-button>
            </el-popconfirm>
                        </span>
            <!--   给操作员使用的按钮(回收站)-->
            <span v-if="scope.row.status===1">
                             <el-popconfirm
                               @onConfirm="back(scope.row.id)"
                               style="margin-left:10px;"
                               confirmButtonText='好的'
                               cancelButtonText='不用了'
                               icon="el-icon-info"
                               iconColor="green"
                               title="这是一段内容确定恢复数据吗？"
                             >
                            <el-button type="text" slot="reference" size="mini"
                                       icon="el-icon-s-operation">还原</el-button>
                        </el-popconfirm>
                                <el-popconfirm
                                  style="margin-left:20px;"
                                  @onConfirm="del(scope.row.id)"
                                  title="这是一段内容确定删除吗？"
                                >
                            <el-button type="text" slot="reference" size="small" icon="el-icon-delete">删除</el-button>
                        </el-popconfirm>
                        </span>

            <!--                        给审核员使用的按钮-->
            <span v-if="scope.row.status==2">
                          <el-popconfirm
                            style="margin-left:20px;"
                            @onConfirm="publish(scope.row.id)"
                            title="审核通过后库存将更新,是否通过"
                          >
                        <el-button type="text" slot="reference" size="small" icon="el-icon-refresh">通过</el-button>
                    </el-popconfirm>
                        <el-popconfirm
                          style="margin-left:20px;"
                          @onConfirm="del(scope.row.id)"
                          title="这是一段内容确定删除吗？"
                        >
                            <el-button type="text" slot="reference" size="small" icon="el-icon-delete">删除</el-button>
                        </el-popconfirm>
                        </span>

          </template>
        </el-table-column>
      </el-table>
      <!-- 分页部分 -->
      <el-pagination
        style="margin-top:10px;"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
      <!-- 入库明细 -->
      <el-dialog title="入库明细" :visible.sync="dialogVisible" @close="closeDetail" width="60%">
            <el-table max-height="300" border :data="detailTable" style="width: 100%"
                      :header-cell-style="{'text-align':'center'}"
                      :cell-style="{'text-align':'center'}">
              <el-table-column prop="name" label="名称"></el-table-column>
               <el-table-column prop="model" label="规格">
                 <template slot-scope="scope">
                  <el-tag size="small" effect="plain" type="success">
                    {{ scope.row.model }}
                  </el-tag>
                 </template>
               </el-table-column>
              <el-table-column prop="unit" label="单位"></el-table-column>
               <el-table-column prop="num" label="数量"></el-table-column>
            </el-table>
            <!--              明细分页-->
        <el-pagination
          style="margin-top:20px;"
          background
          @current-change="handleDetailSizeChange"
          :current-page="this.pageNum"
          :page-size="3"
          layout="prev, pager, next,total"
          :total="this.detailTotal">
        </el-pagination>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { getGoodsInList, getDetail, getApprove } from '../../api/inStock'


export default {
  name: 'Stock',
  data () {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick (picker) {
              const end = new Date()
              const start = new Date(new Date(new Date().toLocaleDateString()).getTime())
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '昨天',
            onClick (picker) {
              const end = new Date(new Date(new Date().toLocaleDateString()).getTime())
              const start = new Date(new Date(new Date().toLocaleDateString()).getTime())
              start.setTime(start.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {}, {
            text: '最近两个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 60)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
      },
      audit: true, //审核页标识
      supplier: {},
      detailTotal: 0,
      pageNum: 1,
      detailId: undefined,
      loading: true,
      detailTable: [],
      dialogVisible: false,
      current: 1,
      size: 10,
      total: 0,
      queryMap: {
        username: '',
        phone: '',
        startTime: '',
        endTime: '',
        staus:''
      },
      tableData2: [
        {
          'id': 1,
          'inNum': '8397123617283',
          'goodName': '智能体脂秤E2',
          'num': 30,
          'price': 80,
          'phone': '13528172659',
          'userName': '陈飞',
          'inDate': '2021-04-24 19:57:31',
          'remark': ''
        }
      ],
      tableData: [],
      range: [],
      pStatus: '',//步骤flag
    }
  },
  methods: {
    /**
     * 关闭明细
     */
    closeDetail () {
      this.pageNum = 1
    },
    clearTime () {
      this.queryMap = {
        pageNum: 1,
        pageSize: 10,
        status: 0
      }
      this.queryMap.startTime = null
      this.queryMap.endTime = null
      this.range = []
    },
    /**
     *  改变页码
     */
    handleDetailSizeChange (newSize) {
      this.pageNum = newSize
      this.detail(this.detailId)
    },

    /**删除明细
     */
    async del (id) {
      const { data: res } = await this.$http.get('business/inStock/delete/' + id)
      if (!res.success) {
        return this.$message.error('删除失败:' + res.data.errorMsg)
      } else {
        await this.loadTableData()
        return this.$message.success('删除入库单记录成功')
      }
    },
    /**
     * 查看入库单明细
     */
    async detail (id) {
      this.detailId = id
      const res = await getDetail(id, this.pageNum)
      if (res.code !== 200) {
        this.$message.error('获取明细失败:' + res.message)
      } else {
        this.detailTable = res.data.goods
        this.detailTotal = res.data.total
        this.dialogVisible = true
      }

    },
    /**
     * 加载表格数据
     */
    async loadTableData () {

      if (this.range != null && this.range.length === 1) {
        this.queryMap.startTime = this.range[0]
      } else if (this.range != null && this.range.length === 2) {
        this.queryMap.startTime = this.range[0]
        this.queryMap.endTime = this.range[1]
      }

      const res = await getGoodsInList(this.current, this.size, this.audit,this.queryMap)
      if (res.code !== 200) {
        return this.$message.error('获取入库列表失败:' + res.message)
      } else {
        this.total = res.data.total
        this.tableData = res.data.goodsIn
      }
    },
    /**
     * 改变页码
     */
    handleSizeChange (newSize) {
      this.size = newSize
      this.loadTableData()
    },
    /**
     * 查询入库单
     */
    search () {
      // this.current = 1
      this.loadTableData()
    },
    /**
     * 点击分页
     */
    handleCurrentChange (current) {
      this.queryMap.pageNum = current
      this.loadTableData()
    },
    /**
     * 通过审核
     */
    async getApprove (id) {
      const res = await getApprove(id)
      if (res.code !== 200) {
        this.$message.error('入库审核失败:' + res.message)
      } else {
        this.$message.success('审核通过，商品已入库')
        await this.loadTableData()
      }
    },
  },
  created () {
    this.loadTableData()
    setTimeout(() => {
      this.loading = false
    }, 1000)
  }
}
</script>


